<template>
  <el-container class="audit">
    <el-main ref="Box">
      <el-scrollbar class="person_body">
      <!--  个人审核  -->
      <el-card v-for="(item,index) in personal_contentList" :key="item.id"
               class="box-card my-duty">
        <!-- 列表内容  -->
        <div class="audit_data">
          <!--   herder       -->
          <div class="describe">
            <div class="describe_left">
              <p>
                <svg-icon class="f-s-20"  style="color: #1966E2; margin-right: 6px;" class-name="m-r-7" icon-class="appraisegr"/>
                <span class="name">{{ item.userName }}</span>
                <span class="solid"></span>
              </p>
              <p>
                <span>{{ item.dutyYear }}年</span>
              </p>
            </div>
            <div class="describe_right">
              <el-dropdown
                trigger="click"
              >
                <div class="audit_img_box" v-show="item.state==1">
                  <svg-icon class="f-s-20"   style="color: #1966E2;margin: 2px 4px 0 0" class-name="m-r-7" icon-class="appraiseshenhe"/>
                  <span style="cursor:pointer" class="active" @click="indexShow=item.dutyId">待审核</span>
                  <el-dropdown-menu v-show="item.dutyId == indexShow">
                    <div class="operation">
                      <p @click="personalPass(item.dutyId)">通过</p>
                      <p @click="personaReject(item.dutyId)">不通过</p>
                    </div>
                  </el-dropdown-menu>
                </div>
              </el-dropdown>
              <span v-show="item.state != 1" :class="item.state == 2 ?'active2':item.state == 3 ?'active1':''">
                {{item.state == 2 ? '不通过' : item.state == 3 ? '通过' : '' }}
              </span>
            </div>
          </div>
          <!--   content     -->
          <div class="audit_content">
            <div class="data_list" v-for="(el,i) in item.contentList" :key="i">
              <span>{{ i + 1 }}</span>
              <span v-html="el.htmlText"></span>
            </div>
          </div>
        </div>
      </el-card>
      <!--  部门审核  -->
      <el-card v-for="(item,index) in department_contentList" :key="item.id"
               class="box-card1 my-duty" v-show="department_contentList.length">
        <!-- 列表内容  -->
        <div class="audit_data">
          <!--   herder       -->
          <div class="describe">
            <div class="describe_left">
              <p>
                <svg-icon class="f-s-24"  style="color: #1966E2;margin-right: 6px;" class-name="m-r-7" icon-class="appraisedr"/>
                <span class="name">{{ item.deptName }}</span>
                <span class="solid"></span>
              </p>
              <p>
                <span class="year">{{ item.dutyYear }}年</span>
              </p>
            </div>
            <div class="describe_right">
              <el-dropdown
                trigger="click"
                ref="department_is_show"
              >
                <div class="audit_img_box" v-show="item.state==1">
                  <svg-icon class="f-s-20"  style="color: #1966E2;margin: 2px 4px 0 0" class-name="m-r-7" icon-class="appraiseshenhe"/>
                  <span style="cursor:pointer" class="active" @click="indexShow=item.dutyId">待审核</span>
                  <el-dropdown-menu v-show="item.dutyId == indexShow">
                    <div class="operation">
                      <p @click="departmentPass(item.dutyId)">通过</p>
                      <p @click="departmentReject(item.dutyId)">不通过</p>
                    </div>
                  </el-dropdown-menu>
                </div>
              </el-dropdown>
              <span v-show="item.state != 1" :class="item.state == 2 ?'active2':item.state == 3 ?'active1':''">{{item.state == 2 ? '不通过' : item.state == 3 ? '通过' : '' }}</span>
            </div>
          </div>
          <!--   content     -->
          <div class="audit_content">
            <div class="data_list" v-for="(el,i) in item.contentList" :key="i">
              <span>{{ i + 1 }}</span>
              <span v-html="el.htmlText"></span>
            </div>
          </div>
        </div>
      </el-card>
        <div class="kong-state" v-if="!department_contentList.length && !personal_contentList.length">
          <div class="flex f-dir align-center kong-box">
            <img class="kong" src="@/assets/appraise/icon/kongzhuangtai.png" alt=""/>
            <div class="kong-text">暂无审核内容~</div>
          </div>
        </div>
      <!--  个人审核驳回理由弹框  -->
        <vxe-modal class="modalBox" v-model="personaCenterDialogVisible" title="审核驳回" width="60%" height="60%" show-zoom resize>
          <template v-slot>
            <div class="personage">
              <textarea placeholder="请注明驳回原因"  class="personage-text f-s-16" style="resize:none" v-model="persona_refuseReason"/>
              <div style="text-align: center;margin-top: 10px;">
                <el-button  class="btn"  size="mini" type="primary" @click="personaConfirm">确 定</el-button>
              </div>
            </div>
          </template>
        </vxe-modal>
      <!--  部门审核驳回理由弹框  -->
        <vxe-modal class="modalBox" v-model="departmentCenterDialogVisible" title="审核驳回" width="60%" height="60%" show-zoom resize>
          <template v-slot>
            <div class="personage">
              <textarea placeholder="请注明驳回原因"  class="personage-text f-s-16" style="resize:none" v-model="department_refuseReason"/>
              <div style="text-align: center;margin-top: 10px;">
                <el-button  class="btn"  size="mini" type="primary" @click="departmentConfirm">确 定</el-button>
              </div>
            </div>
          </template>
        </vxe-modal>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>

<script>
import {syncRequest} from '@/utils/httpRequet'

export default {
  name: 'Examine',//审核职责
  components: {

  },
  data() {
    return {
      personal_contentList: [],//个人列表
      personal_dutyId: '',//个人id
      persona_refuseReason: '',//个人驳回理由
      personaCenterDialogVisible: false, //个人不通过反馈弹窗
      indexShow:-1, // 个人显示下拉框

      department_dutyId: '',//部门id
      department_contentList: [],//部门列表
      department_refuseReason:'',//部门驳回理由
      departmentCenterDialogVisible: false, //部门不通过反馈弹窗
    }
  },
  mounted() {
    this.userGetDeptUser()
    this.deptGetOrgDept()
  },
  methods: {
    //获取个人职责审核列表
    userGetDeptUser() {
      let res = syncRequest({
        url: 'userGetDeptUser',
      })
      if (res.errorCode == '1') {
        let arr=[]
        res.data.map((itme,i)=>{
          if(itme.state != 0){
            // if(itme.userId != this.$store.state.user.userInfo.userId){
            //   arr.push(itme)
            // }
            arr.push(itme)
          }
        })
        this.personal_contentList=arr
      }
    },
    //个人审核通过
    personalPass(id) {
      this.indexShow = -1
      let res = syncRequest({
        url: 'userSaveAuditInfo',
        method:'post',
        data: {
          dutyId: id,
          state: '3'
        }
      })
      if (res.errorCode == 1) {
        this.$message.success('已成功')
      } else {
        this.$message.error('服务器内部错误')
      }
      this.userGetDeptUser()
    },
    //个人审核触发驳回弹框
    personaReject(id) {
      this.personal_dutyId=id
      this.personaCenterDialogVisible = true
    },
    //个人审核驳回弹窗确认
    personaConfirm() {
      let res = syncRequest({
        url: 'userSaveAuditInfo',
        method:'post',
        data: {
          dutyId: this.personal_dutyId,
          state: '2',
          refuseReason: this.persona_refuseReason
        }
      })
      if (res.errorCode == 1) {
        this.$message.success('已成功')
        this.persona_refuseReason=''
      } else {
        this.$message.error('服务器内部错误')
      }
      this.userGetDeptUser()
      this.personaCenterDialogVisible = false
    },

    //获取部门职责审核列表
    deptGetOrgDept() {
      let res = syncRequest({
        url: 'deptGetOrgDept',
      })
      if (res.errorCode == '1') {
        this.department_contentList = res.data.filter(res=> res.state != 0)
      }
    },
    //部门审核通过
    departmentPass(id) {
      this.indexShow = -1
      let res = syncRequest({
        url: 'deptSaveAuditInfo',
        method:'post',
        data: {
          dutyId: id,
          state: '3'
        }
      })
      if (res.errorCode == 1) {
        this.$message.success('已成功')
      } else {
        this.$message.error('服务器内部错误')
      }
      this.deptGetOrgDept()
    },
    //部门审核触发驳回弹框
    departmentReject(id) {
      this.departmentCenterDialogVisible = true
      this.department_dutyId=id
    },
    //部门审核驳回弹窗确认
    departmentConfirm(){
      let res = syncRequest({
        url: 'deptSaveAuditInfo',
        method:'post',
        data: {
          dutyId: this.department_dutyId,
          state: '2',
          refuseReason:this.department_refuseReason
        }
      })
      if (res.errorCode == 1) {
        this.$message.success('已成功')
        this.department_refuseReason=''
      } else {
        this.$message.error('服务器内部错误')
      }
      this.deptGetOrgDept()
      this.departmentCenterDialogVisible = false
    },
  },
}
</script>

<style scoped lang="scss">
.el-main {
  background-color: #F0F0F3;
  color: #333;
}
.f-s-16 {
  font-size: 16px;
}
.f-s-20 {
  font-size: 20px;
}
.f-s-24 {
  font-size: 24px;
}
.audit {
  background-color: #F0F0F3;
  user-select: none;
  padding: 12px 0 12px 12px;
}
::v-deep .el-scrollbar__wrap {
  height: 100%;
  overflow-x: auto;
}
.my-duty {padding-bottom: 12px; margin-right: 12px; border-radius: 4px;
}
.audit>>>.el-card.is-always-shadow{
  box-shadow: none;
}
::v-deep .el-card__body {
  padding: 10px;
}

.box-card1 {
  margin-top: 15px;
}

/*列表内容*/
.audit_data {
  width: 100%;
  box-sizing: border-box;
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.04);*/
}
.person_body{ width: 100%; height: 100%; }
/*herder*/
.describe {
  padding-bottom: 10px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04)
}

.describe_left {
  display: flex;
  font-size: 14px;
  color: #666666;
}

.describe_left > p:nth-child(1) > img {
  width: 14px;
  height: 14px;
}

.describe_left > p {
  display: flex;
  height: 20px;
  align-items: center;
}


.describe_left > p > span {
  display: block;
  font-family: '微软雅黑', Helvetica, sans-serif;
  font-size: 20px;
}
/*空状态样式*/
.kong-state {
  display: flex;
  align-items: center;
  justify-content: center;
}

.kong {
  width: 190px;
  height: 190px;
  margin-bottom: 30px;
}

.kong-box {
  position: relative;
  top: 19px;
}

.kong-text {
  font-size: 18px;
  text-align: center;
  color: rgba(153, 153, 153, 1);
}
.align-center {
  align-items: center;
}
.f-dir {
  flex-direction: column;
}
.solid {
  height: 15px;
  width: 1px;
  background: #eee;
}
.audit_img_box>span{
  font-size: 18px;
  display: block;
}
.audit_img_box{
  display: flex;
  height: 22px;
  line-height: 22px;
  align-items: center;
}

.name, .job, .year {
  font-family: '微软雅黑', Helvetica, sans-serif;
  font-size: 16px;
}

.solid {
  margin: 0 1rem;
}

/*content*/
.audit_content {
  width: 100%;
  font-family: '微软雅黑', Helvetica, sans-serif;
  line-height: 1.7;
}

.data_list {
  width: 100%;
  padding: 10px 1rem 10px 2.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
}

.data_list > span {
  display: block;
}

.data_list > span:nth-child(2) {
  flex: 1;
}

.data_list:nth-last-child(1) {
  border-bottom: none;
}

.data_list > span:nth-child(1) {
  width: 17px;
  height: 17px;
  opacity: 1;
  background-color: #AEB1B8;
  border-radius: 2px;
  display: inline-block;
  color: #FFFFFF;
  text-align: center;
  line-height: 17px;
  margin-right: 10px;
  font-size: 16px;
  margin-top: 6px;
}

.data_list > span:nth-child(2) {
  font-size: 16px;
  font-weight: 400;
  color: #333333;
}

/*操作*/
.operation {
  width: 100%;
  text-align: center;
  padding: 0 25px;
}

.operation > p {
  font-size: 18px;
  color: #666666;
  line-height: 30px;
  cursor: pointer
}
::v-deep .user-tag {
  color: #fff;
  background-color: #07f;
  padding: 2px .4em;
  border-radius: 999em;
}
.operation > p:nth-child(1) {
  padding: 9px 0 15px;
  color: #666666;
  border-bottom: 1px solid #eee;
}
.operation > p:nth-child(2) {
  padding: 15px 0 9px;
  color: #666666;
}

/*驳回提示框*/
::v-deep .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog__title{
  font-size: 20px;
  font-weight: 500;
  color: #000000;
}
/* 审核状态切换样式 */
.active {
  color: #1966E2;
  font-size: 20px !important;
}

.active1 {
  font-size: 20px;
  color: #00AD16;

}

.active2 {
  color: #D00000;
  font-size: 20px;
}
.el-dialog__wrapper{
  top: 4.35rem;
}

>>> .vxe-modal--header {
  text-align: center;
}
::v-deep .vxe-modal--title {
  font-size: 20px;
}
.personage {
  height: 100%;
  padding-bottom: 10px;
}
.personage-text {
  width: 100%;
  height: 90%;
  padding: 10px;
  border: 1px solid rgba(0,0,0,0.04) !important;
}
.btn{
  width: 86px;
  background: #1A66E2;
  font-size: 16px;
}
@media (max-width: 1024px) {
  ::v-deep .vxe-modal--title {
    font-size: 18px;
  }
  .f-s-16 {
    font-size: 14px;
  }
  .f-s-20 {
    font-size: 18px;
  }
  .f-s-24 {
    font-size: 22px;
  }
  .describe_left > p > span {
    display: block;
    font-family: '微软雅黑', Helvetica, sans-serif;
    font-size: 18px;
  }
  .audit_img_box>span{
    font-size: 16px;
    display: block;
  }
  .name, .job, .year {
    font-family: '微软雅黑', Helvetica, sans-serif;
    font-size: 14px;
  }


  .data_list > span:nth-child(1) {
    width: 17px;
    height: 17px;
    opacity: 1;
    background-color: #AEB1B8;
    border-radius: 2px;
    display: inline-block;
    color: #fff;
    text-align: center;
    line-height: 17px;
    margin-right: 10px;
    font-size: 14px;
    margin-top: 6px;
  }

  .data_list > span:nth-child(2) {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
  .operation > p {
    font-size: 16px;
    color: #666666;
    line-height: 30px;
    cursor: pointer
  }

  ::v-deep .el-dialog__title{
    font-size: 18px;
    font-weight: 500;
    color: #000000;
  }
  .btn{
    width: 86px;
    background: #1A66E2;
    font-size: 14px;

  }
  /* 审核状态切换样式 */
  .active {
    color: #1966E2;
    font-size: 18px !important;
  }

  .active1 {
    font-size: 18px !important;
    color: #00AD16;

  }

  .active2 {
    color: #D00000 !important;
    font-size: 18px;
  }
}
</style>
